<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>列表-高层建筑基础信息采集</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        html,
        body,
        #app {
            margin: 0;
            padding: 20px 5px 100px;
            align-items: center;
        }

        [v-cloak] {
            display: none !important;
        }
        h3 {
            color: #0095ff;
            text-align: center;
        }
        .text {
            font-size: 14px;
        }
        .item {
            margin-bottom: 18px;
        }
        .box-card {
            width: 100%;margin-bottom: 15px;position: relative;padding-top: 20px;
        }
        .card-header{
            color: #FFFFFF;font-size: 14px;
            position: absolute;top:0;left:0;background: #0095ff;padding: 5px 25px 5px 15px;border-bottom-right-radius: 5px;
        }
        .button{
            position: absolute;bottom:20px;right:15px;
        }
        .pages{
            text-align: center;
        }
        ul {
            padding-inline-start: 0px;
        }
        .pagination{
            display: flex;margin: 45px 0;
        }
        .pagination li{
            list-style: none;width: 50%;text-align: center;
        }
        .pagination li a{
            text-decoration: none;
            outline: none;
            background-color: #409eff;
            color: #fff;padding: 8px 15px;border-radius: 3px;
        }
        .app-header{
            color: #0095ff;
            text-align: center;background: #FFFFFF;width: 100%;left:0;top:0;z-index: 1000;
            position: fixed;height: 50px;line-height: 50px;font-weight: 700;font-size: 16px;
        }
        .app-back{
            position: absolute;
            left: 15px;font-size: 14px;
        }
        .add a{
            position: fixed;right: 10px;bottom: 135px;
            background: #0095ff;color: #fff;line-height: 45px;
            width: 45px;height: 45px;text-align: center;vertical-align: middle;border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="app-header">
        <div class="app-back" @click="back"><i class="el-icon-arrow-left"></i>返回</div>
        高层建筑基础信息列表
    </div>
    <div v-if="lists.total > 0">
        <el-card class="box-card" v-for="(item,index) in lists.data" :key="index">
            <div class="card-header">@{{ item.community + ' - ' + item.village }}</div>
            <div class="text item">
                乡镇街道：@{{ item.street_text }}
            </div>
            <div class="text item">
                管理主体：@{{ item.body }}
            </div>
            <div class="text item">
                安全管理人：@{{ item.person }}
            </div>
            <div class="text">
                联系电话：@{{ item.mobile }}
            </div>
            <el-button class="button" @click="edit(item.id)" type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
        </el-card>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
    <div class="pages" v-if="lists.last_page > 1">
        <ul class="pagination">
            <li><a :href="lists.prev_page_url">上一页</a></li>
            <li><a :href="lists.next_page_url">下一页</a></li>
        </ul>
    </div>
    <div class="add">
        <a type="primary" class="link"  href="{{ route('home.index.write') }}"><i class="el-icon-plus"></i></a>
    </div>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            lists: {!! $lists !!},
        },
        methods: {
            edit(id) {
                window.location.href = "{{ route('home.index.write') }}" + '?id=' + id
            },
            back(){
                window.location.href = "{{ route('home.index.index') }}";
            }
        },
    });
</script>
</html>
